<template>
  <div id="samstoSpecboxList"  style="display: flex;flex-wrap: wrap;gap: 10px;padding: 10px; ">

        <div class='area'>
          <el-scrollbar style="height: 100%;">
            <div class="tableBox">
              <el-container style="display: flex;flex-wrap: wrap;gap: 10px;width: 100%;height: calc(100% - 10px);">
                  <div v-for="layer in fridgeData.fridgeLayerList" :key="layer.id" style="width:100%;">
                    <el-main class='boxmain'>
                    <el-container>
                      <el-aside width="40px">第{{layer.layerSeq}}层</el-aside>
                      <el-main>
                        <el-row style="height: 60px;">
                          <div v-for="(specbox,specboxIndex) in layer.specboxList" :key="specbox.id">
                            <el-col :span="8">
                              <el-button type="" :class="currentIndex === `${specbox.id}` ? 'actived':''">{{specbox.specboxCode}}</el-button>
                            </el-col>
                          </div>
                        </el-row>
                      </el-main>
                    </el-container>
                    </el-main>
                  </div>
              </el-container>
            </div>
          <div class="box-bottom flex justify-between">
            <div style="width:25px;height:8px;background-color:#e0e0e0;margin-right:30px;margin-left:30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px"></div>
            <div style="width:25px;height:8px;background-color:#e0e0e0;margin-right:30px;margin-left:30px;border-bottom-left-radius:5px;border-bottom-right-radius:5px"></div>
          </div>
          </el-scrollbar>
            
        </div>
  </div>
  <SamstoSpecBoxComp ref="SamstoSpecBoxCompRef" />
</template>

<script lang="ts" setup>
// 引入组件区 ==========
import { ref,reactive,getCurrentInstance} from 'vue';
import { AppStore } from '@/stores/store';
import SamstoSpecBoxComp from './components/SamstoSpecBoxComp.vue';
import {IsEmpty} from "@/utils/common";
let store = AppStore();

// 全局变量定义区 ==========
let { proxy }: any = getCurrentInstance();
let fridgeData: any = reactive({});
let currentIndex =ref('')


//暴露属性和方法
defineExpose({
  getFridgeData
})
function getFridgeData(row :any){
  console.log(row.specboxCode)
  if (IsEmpty(row.fridgeId)){
    Object.assign(fridgeData, null);
    return ;
  }
  console.log('row',row);
  currentIndex.value = row.specboxId;
  const url = '/api/samsto/samstoStorageFridge/getStorageFridgeById';
  proxy.$http
    .get(url, { params: { id:row.fridgeId} })
    .then((res: any) => {
     Object.assign(fridgeData, res.data);
    })
    .catch((err: any) => {
      proxy.$alert(err, '提示');
    });

}
</script>
<style lang="scss" scoped>
#samstoSpecboxList {
  width: 100%;
  height: calc(100% - 40px);
  padding: 0 !important;
  .area {
    width: 100%;
    height: 100%;
    :deep(.el-scrollbar__view){
      height: 100%;
      .tableBox {
      height: calc(100% - 10px);
      background-color: #e0e0e0;

    .box-bottom {
      height: 8px;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
    }
  }
  .boxmain {
    // height: 100%;
    border-color: #e0e0e0;
    border-top-style: solid;
    border-right-style: solid;
    border-left-style: solid;
    .el-button {
      margin: 3px;
    }
  }
  #boxFooter {
    border-color: #bfb8b8;
    border-bottom-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-left-style: solid;
    background-color: #bfb8b8 !important;
    height: 38px !important;
    align-items: center;
    display: flex;
  }
  .el-aside {
    background-color: #ffffff !important;
    color: #22c3dc;
    font-weight: bolder;
    text-align: center;
  }
}

/* 定义电源指示灯的样式 */
.power-indicator {
  width: 16px;
  height: 16px;
  background-color: #006f04; /* 初始绿色 */
  border-radius: 50%; /* 圆形 */
  animation: blink 2s infinite; /* 每1秒闪烁一次，持续循环 */
  margin-top: 4px;
}

/* 定义闪烁的动画 */
@keyframes blink {
  0% {
    background-color: #006f04; /* 绿色 */
  }
  50% {
    background-color: #00e676; /* 更亮的绿色 */
  }
  100% {
    background-color: #006f04; /* 绿色 */
  }
}
:deep(.actived) {
  background-color: #66e4f5 !important;
}
</style>

